<template>
  <div class="equipment-item-box">
    <div style="margin-bottom: 10px">
      <span class="equipmentName">{{ item.equipmentName }}</span>
      <el-popover placement="right" width="400" trigger="click">
         <el-table :data="gridData">
    <el-table-column width="150" property="date" label="报警信息"></el-table-column>
    <el-table-column width="100" property="name" label="报警时间"></el-table-column>
    <el-table-column width="300" property="address" label="报警状态"></el-table-column>
  </el-table>
        <span slot="reference" style="cursor: pointer">
          <svg-icon
            icon-class="warning"
            :class="{ animation: item.alramDataNum > 0, 'waning-img': true }"
          />
          <span class="warning-num" v-show="item.alramDataNum > 0">{{
            item.alramDataNum
          }}</span></span
        >
      </el-popover>
      <!-- <div class="equipment-link">设备信息</div> -->
      <el-link type="primary" class="equipment-link" @click="toInfo()"
        >设备信息</el-link
      >
    </div>
    <div class="display-flex">
      <div
        :style="{
          width: '180px',
          height: '235px',
          background:
            'url(' + getNewImg(item.imageUrl) + ') no-repeat center center',
          backgroundSize: 'cover',
        }"
      ></div>
      <!-- <img style="width:1px;height:1px;" v-show="false" :src="item.imageUrl" @error="handleError($event)"/> -->
      <div style="line-height: 30px; flex: 1; margin-left: 10px">
        <div>设备状态：{{ setStatus(parseInt(item.equipmentType)) }}</div>
        <div>当前任务：{{ item.taskName }}</div>
        <div>&nbsp;&nbsp;排队任务：{{ item.taskQuantity }}</div>
        <div style="margin-bottom: 5px">
          加工进度：
          <span
            :style="{ color: item.currentLayerFinished > 0 ? '#1890FF' : '' }"
            >{{ item.currentLayerFinished }}</span
          >/{{ item.detail }}
          <span class="num-bai">(当前层数/总层数)</span>
        </div>
        <div>剩余时间：{{ second }}</div>
        <el-progress
          :text-inside="true"
          :stroke-width="22"
          :percentage="parseFloat(item.productionStatus)"
        ></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item", "statusOptions", "remaining"],
  data() {
    return {
      newImg: require("@/assets/404_images/no-img.jpg"),
      list: [],
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
       gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518'
        }],
      timer: null,
      second: "0",
      newValue: null,
    };
  },
  watch: {
    // 剩余时间：秒
    remaining(newValue) {
      let _this = this;
      this.newValue = newValue;
      this.second = this.formatSeconds(this.newValue);
      clearInterval(_this.timer);
      _this.timer = setInterval(() => {
        _this.newValue = parseFloat(_this.newValue) - 1;
        if (_this.newValue == -1) {
          clearInterval(_this.timer);
          return;
        }
        _this.second = _this.formatSeconds(_this.newValue);
      }, 1000);
    },
  },
  methods: {
    getNewImg(url) {
      if (!url) return this.newImg;
      else return url;
    },
    handleError(e) {
      this.item.imageUrl = this.img;
    },
    formatSeconds(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      var dayTime = 0; // 天
      var result = "";
      if (value < 60) {
        result = secondTime + "秒";
      } else {
        if (secondTime >= 60) {
          // 如果秒数大于60，将秒数转换成整数
          // 获取分钟，除以60取整数，得到整数分钟
          minuteTime = parseInt(secondTime / 60);
          // 获取秒数，秒数取佘，得到整数秒数
          secondTime = parseInt(secondTime % 60);
          // 如果分钟大于60，将分钟转换成小时
          if (minuteTime >= 60) {
            // 获取小时，获取分钟除以60，得到整数小时
            hourTime = parseInt(minuteTime / 60);
            // 获取小时后取佘的分，获取分钟除以60取佘的分
            minuteTime = parseInt(minuteTime % 60);
            if (hourTime >= 24) {
              // 获取天数， 获取小时除以24，得到整数天
              dayTime = parseInt(hourTime / 24);
              // 获取小时后取余小时，获取分钟除以24取余的分；
              hourTime = parseInt(hourTime % 24);
            }
          }
        }
        if (secondTime > 0) {
          secondTime =
            parseInt(secondTime) >= 10 ? secondTime : "0" + secondTime;
          result = "" + secondTime + "秒";
        }
        if (minuteTime > 0) {
          minuteTime =
            parseInt(minuteTime) >= 10 ? minuteTime : "0" + minuteTime;
          result = "" + minuteTime + "分" + result;
        }
        if (hourTime > 0) {
          result = "" + parseInt(hourTime) + "小时" + result;
        }
        if (dayTime > 0) {
          result = "" + parseInt(dayTime) + "天" + result;
        }
      }
      return result;
    },
    setStatus(status) {
      return this.selectDictLabel(this.statusOptions, status);
    },
    toInfo() {
      this.$router.push({
        path: "equipment/info",
        query: {
          equipmentName: this.item.equipmentName,
          equipmentId: this.item.equipmentId,
        },
      });
    },
    toWorking() {
      this.$router.push({
        path: "technology/technology",
        query: {
          equipmentName: this.item.equipmentName,
          equipmentId: this.item.equipmentId,
        },
      });
    },
    toTask() {
      this.$emit("task", this.item.equipmentId);
    },
    toWarning() {
      this.$router.push({
        path: "equipment/alarmData",
        query: {
          equipmentId: this.item.equipmentId,
        },
      });
    },
  },
};
</script>

<style  scoped>
.equipment-item-box {
  width: 100%;
  padding: 10px;
  margin-bottom: 40px;
  border-radius: 4px;
  box-shadow: 0 0 9px 2px #aaa;
  font-size: 14px;
  position: relative;
}
.equipmentName {
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}
.item-q /deep/ .el-progress-bar {
  background: #aaa;
}
@-webkit-keyframes scaleout {
  0% {
    -webkit-transform: scale(1);
    color: #ce7f56;
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1.1);
    color: #da6a31;
    opacity: 1;
  }
}
@keyframes scaleout {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    color: #ce7f56;
    opacity: 0.5;
  }
  100% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    opacity: 1;
    color: #da6a31;
  }
}

.warning-num {
  color: #ce642e;
  margin-left: 3px;
  font-weight: bold;
}
.waning-img {
  /* width: 22px; */
  font-size: 17px;
  position: relative;
  background: transparent;
  top: -2px;
  color: #1890ff;
}
.animation {
  -webkit-animation: scaleout 0.6s infinite;
  animation: scaleout 0.6s infinite;
}
.equipment-link {
  position: absolute;
  right: 15px;
  top: 12px;
}
.num-bai {
  color: #aaa;
  position: relative;
  font-size: 13px;
  top: -1px;
}
</style>